<template>
  <div class="wrapper">
    <div class="bg-box">
      <img :src="videoImg" alt="">
    </div>
    <div class="video-box">
      <video :poster="videoImg" :src="video" controls="controls" class="video">
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailVideo',
  props: {
    video: String,
    videoImg: String
  }
}
</script>

<style lang="stylus" scoped>
  .wrapper
    position relative
    display flex
    flex-direction row
    justify-content center
    align-items center
    margin-bottom 1rem
    .bg-box
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      z-index -1
      img
        width 100%
    .video-box
      margin-top .25rem
      width 90%
      .video
        width 100%
</style>
